<template>
  <div class="question" :style="{ background: 'url(' + bg + ') no-repeat' }">
    <hry-header title="" :showBackBtn="true" :needBackground="false">
      <div slot="content" class="normal-wrapper">
        <md-scroll-view
          ref="scrollView"
          :scrolling-x="false"
          :auto-reflow="true"
        >
          <h1>风险评估问卷</h1>
          <transition-group name="slide-fade">
            <card
              v-show="current === index"
              v-for="(item, index) in info"
              :key="index"
              :index="index"
              :info="item"
              @change="change"
            ></card>
          </transition-group>
          <div class="submit">
            <a-button
              v-if="current === info.length - 1"
              type="primary"
              @click="submitInfo"
              >提交评估</a-button
            >
            <a-checkbox
              style="margin-top: 20px"
              :checked="isChecked"
              @change="changeChecked"
              v-if="current === info.length - 1"
            >
              <span class="agree_link"
                >我已同意<a
                  href="javaScript:(0)"
                  @click="agreement('tzsm', '投资者声明')"
                  >《投资者声明》 </a
                ><a
                  href="javaScript:(0)"
                  @click="agreement('tzlx', '投资者类型')"
                  >《投资者类型》
                </a>
              </span>
            </a-checkbox>
          </div>
        </md-scroll-view>
      </div>
    </hry-header>
    <a-modal
      width="80%"
      height="80%"
      :title="title"
      :visible="visible"
      onOk="handleOk"
      @cancel="handleOk"
    >
      <agreement :type="type"></agreement>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleOk">
          关闭
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import bg from "@/assets/img/login_bg.png";
import debounce from "lodash/debounce";
import { ScrollView } from "mand-mobile";

export default {
  name: "questionnaire",
  components: {
    [ScrollView.name]: ScrollView,
    card: () => import("@/components/person/questionCard"),
    hryHeader: () => import("@/components/contentWrapper/index"),
    agreement: () => import("@/components/commonAgreement/index")
  },
  data() {
    this.submitInfo = debounce(this.submitInfo, 800);
    return {
      bg,
      info: [],
      current: 0,
      answer: {},
      isLoginPath: true,
      isChecked: false,
      title: "",
      type: "",
      visible: false
    };
  },
  methods: {
    agreement(type, title) {
      this.title = title;
      this.type = type;
      this.visible = true;
    },
    handleOk() {
      this.visible = false;
    },
    changeChecked(e) {
      this.isChecked = e.target.checked;
    },
    change(value, key) {
      this.answer[key] = value;
      if (this.current < this.info.length - 1 && this.current === key) {
        this.current++;
      }
    },
    submitInfo() {
      let arr = Object.keys(this.answer);
      if (arr.length === this.info.length) {
        if (this.isChecked) {
          let strArr = [];
          for (let key in this.answer) {
            let str = "r-group-" + key + "=" + this.answer[key];
            strArr.push(str);
          }
          console.log(strArr)
          this.$ajax
            .post(this.$api.submitQuestionnaire, {
              assess_key: strArr.join("&")
            })
            .then(res => {
              this.$message.success(res.data.msg);
              this.$store.dispatch("changeMemberType", res.data.member_type);
              if (this.isLoginPath) {
                this.$router.push({ name: "home" });
              } else {
                this.$router.go(-1);
              }
            })
            .catch(err => {
              this.$message.error(err);
            });
        } else {
          this.$message.error("尚未同意协议");
        }
      } else {
        this.$message.error("请填写完整风险评估问卷！");
      }
    },
    getInfo() {
      this.$ajax
        .post(this.$api.getQuestionnaire)
        .then(res => {
          this.info = res.data.list;
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  },
  beforeRouteUpdate(to, from, next) {
    if (from.name === "login") {
      this.isLoginPath = true;
    }
    next();
  },
  created() {
    this.getInfo();
  }
};
</script>

<style scoped lang="less">
.question {
  height: 100%;
  width: 100%;
  background-size: 100%, 100% !important;
  .normal-wrapper {
    padding: 40px;
    height: 100%;
    width: 100%;
    h1 {
      font-size: 39px;
      color: @white;
      margin-bottom: 27px;
      text-align: center;
      font-weight: bold;
    }
  }
}
.slide-fade-enter-active {
  transition: all 0.5s ease;
}
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
.submit {
  text-align: center;
  margin-top: 40px;
  .ant-btn {
    height: 75px;
    padding: 0 75px;
    font-size: 30px;
  }
}
</style>
